<template>
  <keep-alive>
    <div class="upload-editor-container">

      <div class="select-box">
        <h2>选择图片存储用途</h2>
        <el-radio-group v-model="radio" @change="changeRadio">
          <el-radio :label="upload.id" v-for="upload in uploadList" :key="upload.id">{{upload.name}}</el-radio>
        </el-radio-group>
      </div>

      <div class="upload-btn">
        <el-upload :http-request="Upload" :multiple="true" :show-file-list="false" drag action="">
          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
      </div>
      <div class="upload-show" v-if="fileList.length">
        <el-table :data="fileList" border style="width: 100%">
          <el-table-column label="示意图" width="240">
            <template #default="scope">
              <template v-if="radio == 3">
                <video :src="scope.row.baseUrl" controls="controls" width="100%"></video>
              </template>
              <template v-if="radio == 4">
                <audio :src="scope.row.baseUrl"></audio>
              </template>
              <template v-if="radio == 2 || radio == 1 || radio == 6">
                <img :src="scope.row.baseUrl" class="img">
              </template>
            </template>
          </el-table-column>
          <el-table-column prop="url" label="url">
            <template #default="scope">
              <div>
                <span style="margin-right: 12px;">绝对地址：{{scope.row.baseUrl}} </span>
                <el-button type="primary" plain v-clipboard:copy="scope.row.baseUrl" v-clipboard:error="onError" v-clipboard:success="clipboardSuccess">复制地址</el-button>
              </div>
              <div>
                <span style="margin-right: 12px;">相对地址：{{scope.row.url}} </span>
                <el-button type="primary" plain v-clipboard:copy="scope.row.url" v-clipboard:error="onError" v-clipboard:success="clipboardSuccess">复制地址</el-button>
              </div>
              <div>
                <span style="margin-right: 12px;">详情里图片：{{`<p><img src='${scope.row.baseUrl}'/></p>`}} </span>
                <!-- <el-button type="primary" plain v-clipboard:copy="`<p><img src='${scope.row.baseUrl}'/></p>`" v-clipboard:error="onError" v-clipboard:success="clipboardSuccess">复制图片代码</el-button> -->
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="margin-top:40px" class="select-box">
        <h2>裁剪图片功能</h2>
        <div style="display:flex;">
        <div style="width:1200px;height:1200px;transform: scale(0.75) translate(-200px, -200px)">
          <vueCropper
            ref="cropper"
            style="width: 100%; height: 100%;" :img="option.img" :outputSize="option.outputSize"
            :outputType="option.outputType" :info="option.info" :canScale="option.canScale" :autoCrop="option.autoCrop"
            :autoCropWidth="option.autoCropWidth" :autoCropHeight="option.autoCropHeight" :fixedBox="option.fixedBox"
            :fixed="option.fixed" :fixedNumber="option.fixedNumber" :canMove="option.canMove" :canMoveBox="option.canMoveBox"
            :original="option.original" :centerBox="option.centerBox" :infoTrue="option.infoTrue" :full="option.full"
            :enlarge="option.enlarge" :mode="option.mode"
            ></vueCropper>
        </div>
        <div style="padding-left:30px">
          <el-upload v-model:file-list="fileCropperList" action="" :auto-upload="false" :show-file-list="false"
          :on-change="handleChange">
            <el-button type="primary">点击上传图片</el-button>
          </el-upload>
          <div style="margin-top:20px">
            <el-button type="primary" @click="getCropDataBase64">获取截取的图片</el-button>
            <el-button type="primary" @click="resetCropperData">重置</el-button>
          </div>
          <div style="margin-top:20px;width:200px">
            截取图片高度：<el-input v-model="option.autoCropHeight"></el-input>
            截取图片宽度：<el-input v-model="option.autoCropWidth"></el-input>
            <div>
              <el-radio-group v-model="cutImageType" @change="cutImageChange">
                <el-radio :label="1">截取活动封面</el-radio>
                <el-radio :label="2">截取活动banner</el-radio>
                <el-radio :label="3">截取活动分享图</el-radio>
              </el-radio-group>
            </div>
          </div>
          <div style="margin-top:20px;width:300px" v-if="imgCropperUrl">
            图片预览：
            <img :src="imgCropperUrl" style="width:300px">
            <el-button type="primary" plain v-clipboard:copy="imgCropperUrl" v-clipboard:error="onError" v-clipboard:success="clipboardSuccess">复制地址</el-button>
            <!-- <el-button type="primary" plain v-clipboard:copy="`<p><img src='${imgCropperUrl}'/></p>`" v-clipboard:error="onError" v-clipboard:success="clipboardSuccess">复制图片代码</el-button> -->
          </div>
        </div>
        </div>
      </div>
      <div style="margin-top:40px" class="select-box">
        <h2>活动详情工具</h2>
        <div style="margin-bottom:20px">
          <tinymce
              v-model:value="detailedInfo"
              style="width: 80%"
            />
        </div>
        <el-button type="primary" plain v-clipboard:copy="detailedInfo" v-clipboard:error="onError" v-clipboard:success="clipboardSuccess">复制详情内容</el-button>
      </div>
    </div>
  </keep-alive>
</template>

<script>
import { client, randomWord } from "@/utils/alioss"
import { ElLoading, ElMessage } from "element-plus"
import { UploadFilled } from '@element-plus/icons-vue'
import Tinymce from "@/components/Tinymce"
export default {
  name: "UploadMain",
  components:{
    UploadFilled,
    Tinymce
  },
  data() {
    return {
      radio: 1,
      uploadList: [
        { id: 1, name: "普通用图", fileName: "img" },
        { id: 2, name: "活动专用图", fileName: "act" },
        { id: 3, name: "视频", fileName: "video" },
        { id: 4, name: "音频", fileName: "audio" },
        { id: 5, name: "固定名称", fileName: "img" },
        { id: 6, name: "前端专用", fileName: "webimgbg" },
      ],
      fileList: [],
      option: {
        img: '', // 裁剪图片的地址 url 地址, base64, blob
        outputSize: 1, // 裁剪生成图片的质量
        outputType: 'png', // 裁剪生成图片的格式 jpeg, png, webp
        info: true, // 裁剪框的大小信息
        canScale: true, // 图片是否允许滚轮缩放
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: 240, // 默认生成截图框宽度
        autoCropHeight: 240, // 默认生成截图框高度
        fixedBox: false, // 固定截图框大小 不允许改变
        fixed: false, // 是否开启截图框宽高固定比例，这个如果设置为true，截图框会是固定比例缩放的，如果设置为false，则截图框的狂宽高比例就不固定了
        fixedNumber: [1, 1], // 截图框的宽高比例 [ 宽度 , 高度 ]
        canMove: true, // 上传图片是否可以移动
        canMoveBox: true, // 截图框能否拖动
        original: false, // 上传图片按照原始比例渲染
        centerBox: false, // 截图框是否被限制在图片里面
        infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
        full: false, // 是否输出原图比例的截图
        enlarge: '1', // 图片根据截图框输出比例倍数
        mode: 'contain' // 图片默认渲染方式 contain , cover, 100px, 100% auto
      },
      fileCropperList: [],
      imgCropperUrl: '',
      detailedInfo: '',
      cutImageType: ''
    };
  },
  methods: {
    // 上传图片
    Upload(file) {
      const loading = ElLoading.service({
        lock: true,
        text: "正在上传...",
        spinner: "icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      console.log(file)
      var fileName = "";
      console.log(this.uploadList)
      if (this.radio === 5 || this.radio === 6) {
        fileName =
          `${this.uploadList[this.radio - 1].fileName}/` + file.file.name;
      } else {
        fileName = `${this.uploadList[this.radio - 1].fileName}/${randomWord(
          true,
          20
        )}${+new Date()}${file.file.name.substr(file.file.name.indexOf("."))}`;
      }

      client()
        .put(fileName, file.file)
        .then((result) => {
          loading.close();
          this.fileList.push({
            baseUrl: "https://img.qumoyugo.com/" + result.name,
            url: "/" + result.name,
          });
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    clipboardSuccess() {
      ElMessage.success("复制成功");
    },
    onError() {
      ElMessage.error("复制失败");
    },
    changeRadio() {
      this.fileList = [];
    },
    handleChange (uploadFile) {
      console.log(777777, uploadFile)
      this.option.img = URL.createObjectURL(uploadFile.raw)
      this.option.autoCropWidth = 240
      this.option.autoCropHeight = 240
      this.cutImageType = ''
    },
    getCropDataBase64 () {
      this.$refs.cropper.getCropBlob((data) => {
        const fileName = `img/${randomWord(
          true,
          20
        )}${+new Date()}.png`
        client()
        .put(fileName, data)
        .then((result) => {
          this.imgCropperUrl = 'https://img.qumoyugo.com/' + result.name
        })
        .catch((err) => {
          this.$message.error(err);
        });
      })
    },
    resetCropperData() {
      this.option.autoCropWidth = 240
      this.option.autoCropHeight = 240
      // this.option.img = ''
      this.cutImageType = ''
      this.$refs.cropper.refresh()
    },
    cutImageChange(key){
      switch (key) {
        case 1:
          this.option.autoCropWidth = 240
          this.option.autoCropHeight = 240
          break;
        case 2:
          this.option.autoCropWidth = 708
          this.option.autoCropHeight = 376
          break;
        case 3:
          this.option.autoCropWidth = 540
          this.option.autoCropHeight = 432
          break;
        default:
          break;
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.upload-editor-container {
  padding: 12px;
  position: relative;
  background-color: #ffffff;
  border-radius: 4px;
}
.select-box {
  h2 {
    font-size: 20px;
    color: #666;
    margin-bottom: 12px;
  }
}
.upload-btn {
  margin-top: 20px;
  width: 300px;
}
.upload-show {
  margin-top: 20px;
  .img {
    width: 90px;
    height: 90px;
  }
}
.el-upload-dragger .el-icon--upload{
  margin: 20px;
}
</style>